﻿<template>
  <div class="slider rotate">
    <div class="content">
      <div class="bg-img-div">
        <img :src="captcha.backgroundImage" id="imgId" v-show="false" alt/>
        <canvas id="canvasId" ref="bgImg" :style="canvasStyle"></canvas>
      </div>
      <div class="rotate-img-div">
        <img src="./img/axis.png" v-show="maskImgShow" alt/>
      </div>
    </div>
    <div class="slider-move">
      <div class="slider-move-track">
        拖动滑块回正图形
      </div>
      <div class="slider-move-btn" :style="sliderMoveBtn" @mousedown="down" @touchstart="down"></div>
    </div>
    <div class="bottom">
      <div class="close-btn" @click="close()"></div>
      <div class="refresh-btn" @click="refreshCaptcha"></div>
    </div>
  </div>
</template>

<script>
import { reqCheck } from '@/api/login'
export default {
  name:"Captcha",
  props:{
    captcha:{
      type:Object
    },
  },
  data() {
    return {
      currentCaptchaConfig:{},
      maskImgShow:false,
      sliderMoveBtn:"",
      canvasStyle:"",
      checkParam:{}
    }
  },
  methods:{
    refreshCaptcha(){
      this.$emit("initCaptcha");
      console.log("ROTATE_DEGREE")
    },
    initCaptcha(){
      let bgImageHeight = this.$refs.bgImg.offsetHeight;
      this.currentCaptchaConfig = {
        end: 190
      }

      this.checkParam = {
        bgImageWidth: this.currentCaptchaConfig.end,
        bgImageHeight: bgImageHeight,
        startSlidingTime: new Date(),
        endSlidingTime: undefined,
        trackList: [],
        data: this.captcha.id
      }
    },
    down(event) {
      this.maskImgShow = true;
      let targetTouches = event.originalEvent ? event.originalEvent.targetTouches : event.targetTouches;
      let startX = event.pageX;
      let startY = event.pageY;
      if (startX === undefined) {
        startX = Math.round(targetTouches[0].pageX);
        startY = Math.round(targetTouches[0].pageY);
      }
      this.currentCaptchaConfig.startX = startX;
      this.currentCaptchaConfig.startY = startY;

      const pageX = this.currentCaptchaConfig.startX;
      const pageY = this.currentCaptchaConfig.startY;
      const trackList = this.checkParam.trackList;
      trackList.push({
        x: pageX - startX,
        y: pageY - startY,
        type: "down",
        t: (new Date().getTime() - this.checkParam.startSlidingTime.getTime())
      });

      // pc
      window.addEventListener("mousemove", this.move);
      window.addEventListener("mouseup", this.up);

      // 手机端
      window.addEventListener("touchmove", this.move, false);
      window.addEventListener("touchend", this.up, false);
      this.sliderMoveBtn = "background-position:-5px 31.0092%";
    },
    move(event) {
      if (event instanceof TouchEvent) {
        event = event.touches[0];
      }
      let pageX = Math.round(event.pageX);
      let pageY = Math.round(event.pageY);
      const startX = this.currentCaptchaConfig.startX;
      const startY = this.currentCaptchaConfig.startY;
      const end = this.currentCaptchaConfig.end;
      const trackList = this.checkParam.trackList;
      let moveX = pageX - startX;
      const track = {
        x: pageX - startX,
        y: pageY - startY,
        type: "move",
        t: (new Date().getTime() - this.checkParam.startSlidingTime.getTime())
      };
      trackList.push(track);
      if (moveX < 0) {
        moveX = 0;
      } else if (moveX > end + 5) {
        moveX = end;
      }

      this.sliderMoveBtn = `transform:translate(${moveX}px, 0);`;
      this.canvasStyle = `transform:rotate(${moveX / (end / 360)}deg);`;
    },
    up(event) {
      //PC
      window.removeEventListener("mousemove", this.move);
      window.removeEventListener("mouseup", this.up);

      //移动端
      window.removeEventListener("touchmove", this.move);
      window.removeEventListener("touchend", this.up);
      if (event instanceof TouchEvent) {
        event = event.changedTouches[0];
      }
      let pageX = Math.round(event.pageX);
      let pageY = Math.round(event.pageY);
      const startX = this.currentCaptchaConfig.startX;
      const startY = this.currentCaptchaConfig.startY;
      const trackList = this.checkParam.trackList;

      const track = {
        x: pageX - startX,
        y: pageY - startY,
        type: "up",
        t: (new Date().getTime() - this.checkParam.startSlidingTime.getTime())
      }
      trackList.push(track);

      this.maskImgShow = false;
      this.checkParam.endSlidingTime = new Date();

      // 校验验证码
      reqCheck(this.checkParam).then(res=>{
        this.checkParam.id = null;
        if(res.code != 501){
          this.close(res.msg);
        }else{
          this.refreshCaptcha();
          this.initCaptcha();
        }
      });
    },
    close(msg){
      this.$emit("close", msg);
    }
  },
  mounted() {
    this.initCaptcha();
  }
}
</script>
<style scoped>
.slider {
  background-color: #fff;
  width: 260px;
  height: 330px;
  z-index: 999;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 6px;
  box-shadow: 0 0 11px 0 #999999;
}

.slider .content {
  width: 100%;
  height: 160px;
  position: relative;
}

.bg-img-div {
  width: 100%;
  height: 140%;
  position: absolute;
  transform: translate(0px, 0px);
}

.bg-img-div img {
  height: 100%;
  margin: 0 auto;
  display: block;
  border-radius: 200px;
}

.bg-img-div canvas{
  border-radius: 200px;
  height: 101%;
  margin: 0 auto;
  display: block;

  position: absolute;
  left: 9px;
  top: 0;
}

.slider .slider-move {
  height: 60px;
  width: 100%;
  margin: auto 0;
  position: relative;
  top:80px
}

.slider .bottom {
  height: 25px;
  width: 100%;
  margin: 65px 10px 10px 0;
}

.refresh-btn, .close-btn, .slider-move-btn {
  background: url(./img/sprite.1.2.4.png) no-repeat;
}

.refresh-btn, .close-btn {
  display: inline-block;
}

.slider-move .slider-move-track {
  line-height: 38px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  color: #88949d;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;

  border-radius: 50px;
  background: #dfe1e2;
  width: 100%;
}

.slider {
  user-select: none;
}

.slider-move .slider-move-btn {
  transform: translate(0, 0);
  background-position: -5px 11.79625%;
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider-move-btn:hover, .close-btn:hover, .refresh-btn:hover {
  cursor: pointer
}

.bottom .close-btn {
  width: 20px;
  height: 20px;
  background-position: 0 44.86874%;
  margin: 10px 10px 10px 5px;
  float: left;
}

.bottom .refresh-btn {
  width: 20px;
  height: 20px;
  background-position: 0 81.38425%;
  margin: 10px 10px 10px 2px;
  float: left;
}

.rotate-img-div {
  height: 140%;
  position: absolute;
  transform: rotate(0deg);
  margin-left: 10px;
}

.rotate-img-div img {
  height: 100%;
}
</style>
